<template>
  <div>
    <el-card>
      <div slot="header"
           class="clearfix">
        <span>订单发货详情</span>
      </div>
      <el-form ref="orderForm"
               :model="orderForm"
               :rules="formRule"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
        <el-form-item label="订单号"
                      prop="orderNum"
                      style="width:30%">
          <el-input v-model="orderForm.orderNum"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="订单时间"
                      prop="addTime"
                      style="width:30%">
          <el-input v-model="orderForm.addTime"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="订单状态"
                      prop="status"
                      style="width:30%;">
          <el-input v-model="orderForm.status"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="付款方式"
                      prop="payType"
                      style="width:30%;">
          <el-input v-model="orderForm.payType"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="订单金额"
                      prop="totalPrice"
                      style="width:30%;">
          <el-input v-model="orderForm.totalPrice"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="购买账号"
                      prop="shopUserAccount"
                      style="width:30%;">
          <el-input v-model="orderForm.shopUserAccount"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="购买用户手机"
                      prop="shopUserMobile"
                      style="width:30%;">
          <el-input v-model="orderForm.shopUserMobile"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        
        <el-form-item label="收货地址"
                      prop="userAddress"
                      style="width:30%;">
          <el-input v-model="orderForm.userAddress"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="tableData"
                style="width: 100%"
                height="400"
                stripe>

        <el-table-column prop="productCode"
                         label="制造商料号"
                         align="center"></el-table-column>
        <el-table-column prop="productCode"
                         label="AKS料号"
                         align="center"></el-table-column>
        <el-table-column prop="menuName"
                         label="供应商"
                         align="center"></el-table-column>

        <el-table-column prop="buyNum"
                         label="数量"
                         align="center"></el-table-column>
                         <!--
        <el-table-column prop="sonStatus"
                         label="商品状态"
                         align="center"></el-table-column>
        <el-table-column prop="buyNum"
                         label="购买数量"
                         align="center"></el-table-column>
        <el-table-column prop="price"
                         label="单价"
                         align="center"></el-table-column>
                         -->
        
        <el-table-column prop="totalMoney"
                         label="总金额"
                         align="center"></el-table-column>
        <el-table-column prop="logisticsCompany"
                         label="物流公司"
                         align="center"></el-table-column>
        <el-table-column prop="logistics"
                         label="物流号"
                         align="center"></el-table-column>
        <el-table-column label="操作"
                         align="center"
                         fixed="right"
                         width="140">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       :disabled="scope.row|statusFilter"
                       @click="sendPro(scope.row,scope.$index)">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示"
                 :visible.sync="dialogVisible"
                 width="30%"
                 :before-close="handleClose">
        <span>是否确认订单</span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="agreeOrder">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示"
                 :visible.sync="redialogVisible"
                 width="30%"
                 :before-close="rehandleClose">
        <span>是否打回订单</span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="redialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="refuseOrder">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="确认发货"
                 :visible.sync="sendVisible"
                 width="30%">
        <el-form ref="orderForm"
               :model="orderForm2"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
           <el-form-item label="物流公司"
                        prop="logistics_company">
            <el-input v-model="orderForm2.logistics_company"
                      placeholder="" ></el-input>
          </el-form-item>
          <el-form-item label="物流号"
                        prop="logistics">
            <el-input v-model="orderForm2.logistics"
                      placeholder="请输入有效的物流编号"></el-input>
          </el-form-item>
        </el-form> 
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="sendVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sendProduct()">确 定</el-button>
        </span>
      </el-dialog>
      
      <el-pagination style="text-align:center;margin-top:20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
      <!--<div class="flex" style="justify-content:center;margin:15px 0" v-show="orderForm.paid==0" >
        <el-button type="primary" size="medium" v-if="isDisabled"  @click="dialogVisible = true">确认订单</el-button>
        <el-button type="danger" size="medium" style="margin-left:50px"  @click="redialogVisible = true" v-if="isDisabled">打回订单</el-button>
      </div>-->
    </el-card>
  </div>
</template>

<script>
import {
  ORDER_CART_LIST,ORDER_PRODUCT_LIST,ORDER_CONFIRM_SEND,
  ORDER_AGREE, ORDER_REFUSE, ADMINCONFIRM
} from '@/utils/api';
import axios from 'axios'
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      mainId:null,
      rowData:{},
      sendVisible:false,
      dialogVisible: false,
      redialogVisible: false,
      orderForm: {},
      orderForm2:{'logistics_company':'顺丰速运','logistics':''},
      formRule: {},
      tableData: [
        // {
        //   AKSNo: "asda112312",
        //   producerNo: "123143424234",
        //   price: "1",
        //   unit: "件",
        //   puchaseQty: 500
        // }
      ],
      payOptions: [
        {
          value: "0",
          label: "未支付"
        },
        {
          value: "1",
          label: "已支付"
        },
        {
          value: "3",
          label: "线下处理"
        }
      ],
      payMethods: [
        {
          value: "0",
          label: "银行卡"
        },
        {
          value: "1",
          label: "线下支付"
        }
      ],
      orderOptions: [
        {
          value: "0",
          label: "未打回"
        },
        {
          value: "1",
          label: "已打回"
        },
        {
          value: "2",
          label: "未确认"
        }
      ],
      isDisabled: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  filters: {
    statusFilter (val) {
       console.log(val.sonStatus)
      return val.sonStatus=='待发货' ? false : true;
    }
  },
  mounted () {
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
      console.log('==>'+JSON.stringify(this.orderForm))
      this.mainId=this.orderForm.id
      this.getOrderList()
    }
  },
  methods: {
    // 确认发货
    sendPro (val) {
      this.sendVisible=true
      this.rowData=val
      
      console.log(val)
    },
    sendProduct(){
      var val=this.rowData
      
      let th = this
      if (val.status == "待付款") {
        val.status = 0
      } else if (val.status == "待收货") {
        val.status = 1
      } else if (val.status == "待发货") {
        val.status = 2
      } else if (val.status == "待评价") {
        val.status = 3
      } else if (val.status == "已评价") {
        val.status = 6
      } else if (val.status == "退换货订单") {
        val.status = -1
      } else if (val.status == "已完成") {
        val.status = 4
      }

 
      ORDER_CONFIRM_SEND({
        orderProductId:this.rowData.sonid,
        logistics:this.orderForm2.logistics,
        logisticsCompany:this.orderForm2.logistics_company
      }).then(res=>{
        this.$message.success('发货成功')
        this.sendVisible=false
        this.getOrderList()
      })

    },
    rehandleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(res => { });
    },
    refuseOrder () {
      ORDER_REFUSE({
        orderNum: this.orderForm.orderId,
      }).then(res => {
        this.$message.success('打回操作成功')
        this.getOrderList()
        this.redialogVisible = false
      })
    },
    agreeOrder () {
      ORDER_AGREE({
        orderNum: this.orderForm.orderId,
      }).then(res => {
        this.$message.success('同意操作成功')
        this.getOrderList()
        this.dialogVisible = false
      })
    },
    getOrderList () {
      ORDER_PRODUCT_LIST({
        mainId: this.mainId,
        pageNo:this.currentPage,
        pageSize:this.pageSize
      }).then(res => {
          this.tableData=res.data.dataList
          this.total=res.data.count
          for (let i in this.tableData) {
            this.tableData[i].addTime = this.formatSecond(this.tableData[i].addTime)
            if(this.tableData[i].sonStatus==1){
              this.tableData[i].sonStatus = "已发货"
            }else{
              this.tableData[i].sonStatus = "待发货"
            }
          }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getOrderList()
    },
        //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
</style>